import { defineComponent, ref } from 'vue'
import { useMouse } from '../util/util'
import Color from './color'
import { ElButton } from 'element-plus'
// import { CallTracker } from 'assert/strict';
export default defineComponent({
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    setup() {
        const name = '123'
        const mesg = ref('123')
        const { x, y } = useMouse()
        const onclickhandle = (e: MouseEvent) => {
            console.log(e)
            mesg.value = String(e.clientX)
        }
        const alertTest = (e: MouseEvent) => {
            console.log(e)
        }
        return {
            x,
            y,
            onclickhandle,
            name,
            mesg,
            alertTest,
        }
    },
    render() {
        return (
            <div
                onClick={(e) => {
                    this.onclickhandle(e)
                }}
            >
                name: {this.name}
                <p>x:{this.x}</p>
                <p>y:{this.y}</p>
                <Color />
                <p>mesg:{this.mesg}</p>
                <ElButton
                    type={'primary'}
                    onClick={(e: MouseEvent) => {
                        this.alertTest(e)
                    }}
                >
                    {' '}
                    tewww
                </ElButton>
                {/*<ElCheckboxButton />*/}
            </div>
        )
    },
})
